Day6- JavaScript實作文章上傳(一)

2022 iThome 鐵人賽

DAY 5

自我挑戰組

node.js 前端後端全都要系列第 6 篇

14th鐵人賽

xdomodomox

2022-10-03 11:32:18

606 瀏覽

分享至

首先，先簡易寫一個HTML網頁。

最常見的輸入格是input

<input type="text" id="title"/>

這樣就可以簡易的呈現讓用戶輸入的格子。

若要輸入多行，例如文章或評論，可以使用textarea。

 <textarea id="content" rows="8"></textarea>

這樣就可以完成一個簡單的PO文頁面。

<!DOCTYPE html> 
<html>         
    <head>      
        <meta charset="UTF-8"></meta> 
        <title>文章上傳</title>    
    </head>
    <body>  
        <p>標題</p>
        <input type="text" id="title"/>
        <p>內容</p>
        <textarea id="content" rows="8"></textarea>
        <button id="btn">發布</button>
        <div id="list">
            <div class="article">
                <h2>今天</h2>
                <p>又要早八不想出門。</p>
            </div>

        </div>
        <script src="script.js"></script>
    </body>
</html>

成品如下：